<template>
	<view class="login">
		<view class="wrap">
			<u-form class="form" :model="loginForm" ref="loginForm">
				<u-form-item prop="phone" label="账号" left-icon='account-fill' label-width='140rpx' label-align='center'>
					<u-input v-model="loginForm.phone" placeholder='请输入您的账号' style="color: #fff;" />
				</u-form-item>
				<u-form-item prop="password" label="密码" left-icon='lock-fill' label-width='140rpx' label-align='center'>
					<u-input v-model="loginForm.password" type="password" placeholder='请输入您的密码' />
				</u-form-item>
				<u-button class="custom-style" shape="circle" :ripple="true" ripple-bg-color="#fab6b6" @click="login">登录</u-button>
			</u-form>
		</view>
		<u-toast ref="uToast" />
		
		<!-- 无网络提示 -->
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import wyMusicApi from "@/util/wyMusicApi.js"
	export default {
		data() {
			return {
				loginForm: {
					phone: '',
					password: ''
				},
				rules: {
					phone: [{
						required: true,
						message: '请输入您的账号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					password: [{
						required: true,
						message: '请输入您的密码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}]
				}
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.loginForm.setRules(this.rules);
		},
		methods: {
			login() {
				this.$refs.loginForm.validate(valid => {
					if (valid) {
						uni.request({
							url: wyMusicApi.iphoneLogin,
							data: this.loginForm,
							xhrFields: {
								withCredentials: true
							},
							header: {
								'content-type': 'application/json; charset=utf-8',
							},
							success: (res) => {
								if (res.data.code == 200) {
									let userInfo = {
										nickname: res.data.profile.nickname,
										city: res.data.profile.city,
										avatarUrl: res.data.profile.avatarUrl
									}
									uni.setStorage({
										key: 'userInfo',
										data: JSON.stringify(userInfo)
									});
									uni.setStorage({
										key: 'cookie',
										data: res.data.cookie
									});
									uni.setStorage({
										key: 'token',
										data: res.data.token
									});
									// localStorage.setItem('userInfo', JSON.stringify(userInfo))
									// localStorage.setItem('cookie', res.data.cookie)
									// localStorage.setItem('token', res.data.token)
									uni.reLaunch({
										url: '/pages/look/look'
									});
									this.$refs.uToast.show({
										title: '登录成功',
										type: 'success',
										position: 'top',
										icon: true,
									})
								} else {
									this.$refs.uToast.show({
										title: '密码错误!',
										type: 'error',
										position: 'top',
										icon: true,
									})
								}
							}
						});
					} else {}
				});
			}
		}
	}
</script>

<style>
	.login {
		height: 100%;
	}

	.wrap {
		height: 100vh;
		padding: 0rpx 40rpx;
		padding-top: 20%;
		background: url(http://123.56.1.202/xxch/images/bg.jpg) center center no-repeat;
		background-size: 100% 100%;
	}

	.form {
		height: 100%;
		position: relative;
	}

	.custom-style {
		width: 80%;
		position: absolute;
		left: 0%;
		top: 70%;
		color: #fa3534;
		background-color: #fff;
	}

	>>>.u-form-item--left__content__label,
	>>>.u-form-item--left__content__icon,
	>>>.uni-input-input,
	>>>.u-form-item__message {
		/* color: #fff; */
	}
</style>
